﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>yueim</title>
    <link rel="stylesheet" href="css/amazeui.min.css" />
    <link rel="stylesheet" href="css/main.css" />
</head>
<body>
    <div class="box">
        <div class="wechat">

            <div class="sidestrip">
                <div class="am-dropdown" data-am-dropdown>
                    <!--头像插件-->
                    <div class="own_head am-dropdown-toggle"></div>
                    <div class="am-dropdown-content">
                        <div class="own_head_top">
                            <div id='own_avatar'></div>
                            <div class="own_head_top_text">
                                <p class="own_name"></p>
                                <p class="own_numb"></p>
                            </div>
                        </div>
                        <div class="own_head_bottom">
                            <p><span>地区</span></p>
                            <div class="own_head_bottom_img">
                                <a href=""><img src="images/icon/head_1.png" /></a>
                                <a href=""><img src="images/icon/head_2.png" /></a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--三图标-->
                <div class="sidestrip_icon">
                    <a id="si_1" style="background: url(images/icon/head_2_1.png) no-repeat;"><div class="bardge" style="display: none"></div></a>
                    <a id="si_2"></a>
                    <a id="si_3"></a>
                </div>

                <!--底部扩展键-->
                <div id="doc-dropdown-justify-js">
                    <div class="am-dropdown" id="doc-dropdown-js" style="position: initial;">
                        <div class="sidestrip_bc am-dropdown-toggle"></div>
                        <ul class="am-dropdown-content" style="">
                            <li>
                                <a href="#" id="add">添加好友</a>
                                <div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
                                    <div class="am-modal-dialog">
                                        <div class="am-modal-hd">添加好友</div>
                                        <div class="am-modal-bd">
                                            <input type="text" class="am-modal-prompt-input">
                                        </div>
                                        <div class="am-modal-footer">
                                            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                                            <span class="am-modal-btn" data-am-modal-confirm>提交</span>
                                        </div>
                                    </div>
                                </div>
                            </li>

                            <li><a href="#" id="create_group">创建群组</a>
                                <div class="am-modal am-modal-no-btn" id="my-popup">
                                    <div class="am-modal-dialog">
                                        <div class="am-modal-hd">
                                            <h4 class="am-modal-title">创建群组</h4>
                                            <span data-am-modal-close
                                                  class="am-close">&times;</span>
                                        </div>
                                        <div class="am-modal-bd" >
                                            <div class="am-g"  style="height: 100%;">
                                                <div class="am-u-sm-4" style="height: 100%;">
                                                    <ul id="group_friend">

                                                    </ul>
                                                </div>
                                                <div class="am-u-sm-8" style="height: 100%;">
                                                    <form action="" class="am-form">
                                                        <fieldset>
                                                            <div class="am-form-group">
                                                                <input type="text" id="group_name" minlength="3" placeholder="输入群组名" class="am-form-field" required/>
                                                            </div>
                                                        </fieldset>
                                                    </form>
                                                    <div class="am-g">
                                                        <div class="am-u-sm-8"></div>
                                                        <div class="am-u-sm-4">
                                                            <button class="am-btn-secondary" data-am-modal-confirm>提交</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!--聊天列表-->
            <div class="middle on">
                <div class="wx_search">
                    <input type="text" placeholder="搜索" />
                    <button>+</button>
                </div>
                <div class="office_text">
                    <ul class="user_list">
                    </ul>
                </div>
            </div>

            <!--好友列表-->
            <div class="middle">
                <div class="wx_search">
                    <input type="text" placeholder="搜索" />
                    <button>+</button>
                </div>
                <div class="office_text">
                    <ul class="friends_list">

                    </ul>
                </div>
            </div>

            <!--程序列表-->
            <div class="middle">
                <div class="wx_search">
                    <input type="text" placeholder="搜索收藏内容" />
                    <button>+</button>
                </div>
                <div class="office_text">
                    <ul class="icon_list">
                        <!--<li class="icon_active">
                            <div class="icon"><img src="images/icon/icon.png" alt="" /></div>
                            <span>全部收藏</span>
                        </li>
                        <li>
                            <div class="icon"><img src="images/icon/icon1.png" alt="" /></div>
                            <span>链接</span>
                        </li>
                        <li>
                            <div class="icon"><img src="images/icon/icon2.png" alt="" /></div>
                            <span>相册</span>
                        </li>
                        <li>
                            <div class="icon"><img src="images/icon/icon3.png" alt="" /></div>
                            <span>笔记</span>
                        </li>
                        <li>
                            <div class="icon"><img src="images/icon/icon4.png" alt="" /></div>
                            <span>文件</span>
                        </li>
                        <li>
                            <div class="icon"><img src="images/icon/icon5.png" alt="" /></div>
                            <span>音乐</span>
                        </li>
                        <li>
                            <div class="icon"><img src="images/icon/icon6.png" alt="" /></div>
                            <span>标签</span>
                        </li>-->
                    </ul>
                </div>
            </div>

            <!--聊天窗口-->
            <div class="talk_window">
                <div class="windows_top">
                    <div class="windows_top_box">
                        <span id="chat_subject"></span>
                        <ul class="window_icon">
                            <li><a href=""><img src="images/icon/icon7.png" /></a></li>
                            <li><a href=""><img src="images/icon/icon8.png" /></a></li>
                            <li><a href=""><img src="images/icon/icon9.png" /></a></li>
                            <li><a href=""><img src="images/icon/icon10.png" /></a></li>
                        </ul>
                        <div class="extend" class="am-btn am-btn-success" data-am-offcanvas="{target: '#doc-oc-demo3'}"></div>
                        <!-- 侧边栏内容 -->
                        <div id="doc-oc-demo3" class="am-offcanvas">
                            <div class="am-offcanvas-bar am-offcanvas-bar-flip">
                                <div class="am-offcanvas-content">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--聊天内容-->
                <div class="windows_body">
                    <div class="office_text" style="height: 100%;">
                        <ul class="content" id="chatbox">
                        </ul>
                    </div>
                </div>

                <div class="windows_input" id="talkbox">
                    <div class="input_icon">
                        <a href="javascript:;" id="face"></a>
                        <a href="javascript:;"></a>
                        <a href="javascript:;"></a>
                        <a href="javascript:;"></a>
                        <a href="javascript:;"></a>
                        <a href="javascript:;"></a>
                    </div>
                    <div class="input_box">
                        <textarea name="" rows="" cols="" id="input_box"></textarea>
                        <button id="send">发送（S）</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">好友申请</div>
            <div class="am-modal-bd" id="friend-messages">

            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>拒绝</span>
                <span class="am-modal-btn" data-am-modal-confirm>同意</span>
            </div>
        </div>
    </div>
    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd" id="alert-content">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/han.avatar.js"></script>
    <script type="text/javascript" src="js/layer/layer.js"></script>
    <script type="text/javascript" src="js/mustache.js"></script>
    <script type="text/javascript" src="js/amazeui.min.js"></script>
    <script type="text/javascript" src="js/zUI.js"></script>
    <script type="text/javascript" src="js/config.js"></script>
    <script type="text/javascript" src="js/wechat.js"></script>
    <script src="./js/websocket-client.js"></script>
    <script src="./js/chat.js"></script>
    <script src="./js/index.js"></script>
<script>
    window.onload = function () {
        function a() {
            var si1 = document.getElementById('si_1');
            var si2 = document.getElementById('si_2');
            var si3 = document.getElementById('si_3');
            si1.onclick = function () {
                si1.style.background = "url(images/icon/head_2_1.png) no-repeat"
                si2.style.background = "";
                si3.style.background = "";
                $(".bardge").hide();
            };
            si2.onclick = function () {
                si2.style.background = "url(images/icon/head_3_1.png) no-repeat"
                si1.style.background = "";
                si3.style.background = "";
            };
            si3.onclick = function () {
                si3.style.background = "url(images/icon/head_4_1.png) no-repeat"
                si1.style.background = "";
                si2.style.background = "";
            };
        };
        function b() {
            var btn = document.getElementById('send');
            var text = document.getElementById('input_box');
            btn.onclick = function () {
                if (text.value == '') {
                    alert('不能发送空消息');
                } else {
                    chat.sendMsg(text.value);
                };
            };
        };
        a();
        b();
    };
    index.init();
</script>
    <div type="text/html" style="display: none;" id="face-list">
        <ul  class="face">
            <li><a class="face-item" href="#" title="微笑" code="/01/"><img src="./images/face/01.gif" /></a></li>
            <li><a class="face-item" href="#" title="色" code="/02/"><img src="./images/face/02.gif" /></a></li>
            <li><a class="face-item" href="#" title="发呆" code="/03/"><img src="./images/face/03.gif" /></a></li>
            <li><a class="face-item" href="#" title="得意" code="/04/"><img src="./images/face/04.gif" /></a></li>
            <li><a class="face-item" href="#" title="流泪" code="/05/"><img src="./images/face/05.gif" /></a></li>
            <li><a class="face-item" href="#" title="害羞" code="/06/"><img src="./images/face/06.gif" /></a></li>
            <li><a class="face-item" href="#" title="闭嘴" code="/07/"><img src="./images/face/07.gif" /></a></li>
            <li><a class="face-item" href="#" title="睡" code="/08/"><img src="./images/face/08.gif" /></a></li>
            <li><a class="face-item" href="#" title="撇嘴" code="/09/"><img src="./images/face/09.gif" /></a></li>
            <li><a class="face-item" href="#" title="大哭" code="/10/"><img src="./images/face/10.gif" /></a></li>
            <li><a class="face-item" href="#" title="发怒" code="/11/"><img src="./images/face/11.gif" /></a></li>
            <li><a class="face-item" href="#" title="调皮" code="/12/"><img src="./images/face/12.gif" /></a></li>
            <li><a class="face-item" href="#" title="呲牙" code="/13/"><img src="./images/face/13.gif" /></a></li>
            <li><a class="face-item" href="#" title="惊讶" code="/14/"><img src="./images/face/14.gif" /></a></li>
            <li><a class="face-item" href="#" title="难过" code="/15/"><img src="./images/face/15.gif" /></a></li>
            <li><a class="face-item" href="#" title="酷" code="/16/"><img src="./images/face/16.gif" /></a></li>
            <li><a class="face-item" href="#" title="冷汗" code="/17/"><img src="./images/face/17.gif" /></a></li>
            <li><a class="face-item" href="#" title="抓狂" code="/18/"><img src="./images/face/18.gif" /></a></li>
            <li><a class="face-item" href="#" title="吐" code="/19/"><img src="./images/face/19.gif" /></a></li>
            <li><a class="face-item" href="#" title="偷笑" code="/20/"><img src="./images/face/20.gif" /></a></li>
            <li><a class="face-item" href="#" title="可爱" code="/21/"><img src="./images/face/21.gif" /></a></li>
            <li><a class="face-item" href="#" title="白眼" code="/22/"><img src="./images/face/22.gif" /></a></li>
            <li><a class="face-item" href="#" title="傲慢" code="/23/"><img src="./images/face/23.gif" /></a></li>
            <li><a class="face-item" href="#" title="饥饿" code="/24/"><img src="./images/face/24.gif" /></a></li>
            <li><a class="face-item" href="#" title="困" code="/25/"><img src="./images/face/25.gif" /></a></li>
            <li><a class="face-item" href="#" title="惊恐" code="/26/"><img src="./images/face/26.gif" /></a></li>
            <li><a class="face-item" href="#" title="流汗" code="/27/"><img src="./images/face/27.gif" /></a></li>
            <li><a class="face-item" href="#" title="憨笑" code="/28/"><img src="./images/face/28.gif" /></a></li>
            <li><a class="face-item" href="#" title="大兵" code="/29/"><img src="./images/face/29.gif" /></a></li>
            <li><a class="face-item" href="#" title="奋斗" code="/30/"><img src="./images/face/30.gif" /></a></li>
            <li><a class="face-item" href="#" title="咒骂" code="/31/"><img src="./images/face/31.gif" /></a></li>
            <li><a class="face-item" href="#" title="疑问" code="/32/"><img src="./images/face/32.gif" /></a></li>
            <li><a class="face-item" href="#" title="嘘" code="/33/"><img src="./images/face/33.gif" /></a></li>
            <li><a class="face-item" href="#" title="晕" code="/34/"><img src="./images/face/34.gif" /></a></li>
            <li><a class="face-item" href="#" title="折磨" code="/35/"><img src="./images/face/35.gif" /></a></li>
            <li><a class="face-item" href="#" title="衰" code="/36/"><img src="./images/face/36.gif" /></a></li>
            <li><a class="face-item" href="#" title="骷髅" code="/37/"><img src="./images/face/37.gif" /></a></li>
            <li><a class="face-item" href="#" title="敲打" code="/38/"><img src="./images/face/38.gif" /></a></li>
            <li><a class="face-item" href="#" title="再见" code="/39/"><img src="./images/face/39.gif" /></a></li>
            <li><a class="face-item" href="#" title="擦汗" code="/40/"><img src="./images/face/40.gif" /></a></li>
            <li><a class="face-item" href="#" title="抠鼻" code="/41/"><img src="./images/face/41.gif" /></a></li>
            <li><a class="face-item" href="#" title="鼓掌" code="/42/"><img src="./images/face/42.gif" /></a></li>
            <li><a class="face-item" href="#" title="糗大了" code="/43/"><img src="./images/face/43.gif" /></a></li>
            <li><a class="face-item" href="#" title="坏笑" code="/44/"><img src="./images/face/44.gif" /></a></li>
            <li><a class="face-item" href="#" title="左哼哼" code="/45/"><img src="./images/face/45.gif" /></a></li>
            <li><a class="face-item" href="#" title="右哼哼" code="/46/"><img src="./images/face/46.gif" /></a></li>
            <li><a class="face-item" href="#" title="哈欠" code="/47/"><img src="./images/face/47.gif" /></a></li>
            <li><a class="face-item" href="#" title="鄙视" code="/48/"><img src="./images/face/48.gif" /></a></li>
            <li><a class="face-item" href="#" title="委屈" code="/49/"><img src="./images/face/49.gif" /></a></li>
            <li><a class="face-item" href="#" title="快哭了" code="/50/"><img src="./images/face/50.gif" /></a></li>
            <li><a class="face-item" href="#" title="阴险" code="/51/"><img src="./images/face/51.gif" /></a></li>
            <li><a class="face-item" href="#" title="亲亲" code="/52/"><img src="./images/face/52.gif" /></a></li>
            <li><a class="face-item" href="#" title="吓" code="/53/"><img src="./images/face/53.gif" /></a></li>
            <li><a class="face-item" href="#" title="可怜" code="/54/"><img src="./images/face/54.gif" /></a></li>
            <li><a class="face-item" href="#" title="啵一个" code="/55/"><img src="./images/face/55.gif" /></a></li>
            <li><a class="face-item" href="#" title="猪头" code="/56/"><img src="./images/face/56.gif" /></a></li>
            <li><a class="face-item" href="#" title="强" code="/57/"><img src="./images/face/57.gif" /></a></li>
            <li><a class="face-item" href="#" title="握手" code="/58/"><img src="./images/face/58.gif" /></a></li>
            <li><a class="face-item" href="#" title="胜利" code="/59/"><img src="./images/face/59.gif" /></a></li>
            <li><a class="face-item" href="#" title="OK" code="/60/"><img src="./images/face/60.gif" /></a></li>
        </ul>
    </div>
</body>

</html>

